<!--
 * @FilePath: /web-vue/src/views/SysMenu/addForm.vue
 * @Description: 【菜单】新增表单
-->
<template>
  <div>
    <!-- 弹出层-表单 -->
    <el-dialog
      class="add-dialog"
      title="新增【菜单】"
      :visible.sync="visible"
      :confirmLoading="confirmLoading"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      top="7vh"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addForm"
        status-icon
        label-width="120px"
        style="width: 100%"
        class="layer-form-style"
      >
        <el-form-item label="父级菜单：" prop="parentNode" size="mini">
          <el-cascader
            v-model="addForm.parentNode"
            :options="menuList"
            :props="{
              expandTrigger: 'hover',
              checkStrictly: true,
              emitPath: false,
              value: 'node',
              label: 'title',
              children: 'children',
            }"
            placeholder="请选择父级菜单"
            filterable
            clearable
            :show-all-levels="false"
            size="medium"
            style="width: 99%"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="菜单名称：" prop="title" size="mini">
          <el-input
            v-model="addForm.title"
            placeholder="请输入菜单名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单类型：" prop="type" size="mini">
          <el-radio-group v-model="addForm.type">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="访问路径："
          prop="href"
          size="mini"
          v-if="addForm.type === 1"
        >
          <el-input
            v-model="addForm.href"
            placeholder="请输入访问路径"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="打开类型："
          prop="openType"
          size="mini"
          v-if="addForm.type === 1"
        >
          <el-select
            v-model="addForm.openType"
            filterable
            clearable
            placeholder="请选择"
            style="width: 99%"
          >
            <el-option label="框架(iframe)" value="_iframe"></el-option>
            <el-option label="新窗口" value="_blank"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标：" prop="icon" size="mini">
          <el-input
            v-model="addForm.icon"
            placeholder="请输入图标"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="rank" size="mini">
          <el-input-number
            :step="1"
            v-model="addForm.rank"
            placeholder="请输入排序"
            clearable
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          icon="el-icon-finished"
          @click="handleSubmit()"
          >保存
        </el-button>
        <el-button icon="el-icon-refresh-left" @click="handleCancel()"
          >取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const dateTimePickerOption = {
  shortcuts: [
    {
      text: "今天",
      onClick(picker) {
        picker.$emit("pick", new Date());
      },
    },
    {
      text: "昨天",
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        picker.$emit("pick", date);
      },
    },
    {
      text: "一周前",
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit("pick", date);
      },
    },
  ],
};

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      addForm: {
        node: null,
        parentNode: null,
        title: null,
        type: null,
        openType: null,
        icon: null,
        href: null,
        rank: null,
      },
      // 表单校验规则
      rules: {
        parentNode: [
          {
            required: true,
            message: "父级菜单不能为空！",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "菜单名称不能为空！",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "菜单类型不能为空！",
            trigger: "blur",
          },
        ],
        rank: [
          {
            required: true,
            message: "排序不能为空！",
            trigger: "blur",
          },
        ],
      },
      // 菜单列表
      menuList: [],
      // 日期选择快捷方式
      pickerOptions: dateTimePickerOption,
    };
  },

  methods: {
    // 打开【菜单】表单新增窗口
    openAddForm(isShow) {
      this.visible = isShow;
      this.$api
        .querySysMenu()
        .then((res) => (this.menuList = res.data))
        .catch((err) => console.log(`【菜单】查询接口发生错误: ${err}`));
    },

    // 关闭【菜单】表单新增窗口
    handleCancel() {
      this.visible = false;
      this.$refs["addForm"].resetFields();
    },

    // 提交
    handleSubmit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            target: document.querySelector(".add-dialog"),
            lock: true,
            text: "正在保存，请耐心等待！",
          });

          let vueIns = this;
          // 请求参数
          let param = Object.assign({}, this.addForm);
          // 发起请求
          this.$api
            .addSysMenu(param)
            .then((res) => {
              loading.close();
              let { status, message, data } = res.data; // 响应数据
              if (status == 200) {
                this.$emit("afterSubmit");
                this.handleCancel();
                // 提示信息
                this.$message({
                  type: "success",
                  message: `操作成功！已新增【菜单】!${message}`,
                  duration: 1680,
                });
              } else if (status == 403) {
                this.$message({
                  message: `权限不足！${message}`,
                  type: "error",
                  center: true,
                  duration: 1680,
                });
                // this.$router.push("/login");
              } else {
                this.$alert(`操作失败！${message}`, "【菜单】新增", {
                  type: "error",
                  confirmButtonText: "确定",
                  callback: (action) => {},
                });
              }
            })
            .catch(function (err) {
              loading.close();
              vueIns.visible = false;
              console.log(`【菜单】新增接口发生错误：${err}`);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";
</style>
